<template>
  <div class="portalSearch"  :style="{height:!hightShow?'50px':'auto'}">
    <el-form ref="form" :model="form" :inline="true" size="mini" label-width="80px">
        <el-form-item :label="item.label"  v-for="item in formData" :key="item.label" style="width:280px">
          <component
          :is="item.type"
          v-bind="item.props"
          v-model="form[item.key]"
          :placeholder="item.placeholder"
          :getDataApi="item.getDataApi||''" ref="components"
          :type="item.key"
          >
            <template v-if="item.type==='el-select'">
              <el-option v-for="sItem in item.options" :key="sItem.value" :label="sItem.label" :value="sItem.value"></el-option>
            </template>
          </component>
        </el-form-item>
          <el-form-item style="width:200px" v-if="!hightShow">
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="resetForm">重置</el-button>
          </el-form-item>
    </el-form>
    <el-row v-if="hightShow" style="text-align: center;">
      <el-col :span="24">
        <el-button type="primary" @click="onSubmit" size="mini">查询</el-button>
        <el-button type="primary" @click="resetForm" size="mini">重置</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import portalScrollSelect from "@/components/portalScrollSelect";
// import highSearch from "./highSearch";
export default {
  name: "portalSearch",
  props: {
    formData: {
      type: Array,
      default: () => []
    },
    hightShow: {
      type: Boolean,
      default: false
    }
  },
  components: {
    portalScrollSelect
    // highSearch
  },
  created () {
    if (Array.isArray(this.formData) && this.formData.length > 0) {
      let keys = this.formData.map(v => v.key);
      console.log(keys);
      if (keys.length > 0) {
        keys.forEach(v => {
          this.$set(this.form, v, "");
        });
      }
      console.log(this.form);
    }
  },
  data () {
    return {
      form: {}
      // a: [{value: "001019", label: "刘桂红"}]
    };
  },
  methods: {
    onSubmit () {
      if (this.$refs.components.length > 0) {
        let treeSelect = this.$refs.components.filter(v => v.$el.className === "wl-tree-select");
        if (treeSelect.length > 0) {
          // let key =
          treeSelect.forEach(v => {
            let key = v.type;
            for (let i in this.form) {
              if (i === key) {
                this.form[key] = v.getData();
              }
            }
          });
        }
      }
      console.log(this.form);
      this.$emit("submit", this.form);
    },
    resetForm () {
      let treeSelect = this.$refs.components.filter(v => v.$el.className === "wl-tree-select");
      if (treeSelect.length > 0) {
        // let key =
        treeSelect.forEach(v => {
          let key = v.type;
          for (let i in this.form) {
            if (i === key) {
              v.setData([]);
            }
          }
        });
      }
      let clearKeys = this.formData.filter(v => v.type !== "portalScrollSelect").map(v => v.key);
      clearKeys.forEach(v => {
        this.form[v] = "";
      });
    }
  }
};
</script>

<style lang="less" scoped>
.portalSearch{
  padding: 10px 0 0 0;
  box-shadow:1px 2px 2px #ddd;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  overflow: hidden;
  background-color:#fff;
 /deep/ .el-form-item{
    .el-form-item__content{
     width: 200px;
    }
  }
}

</style>
